{% extends "../base.html" %}
{% load admin_utils %}

{% block main_content %}
<div id="application-engine-config-vars">
    <bk-button :theme="'primary'" :title="'主要按钮'" class="mr10" @click="handleCreate">
        添加环境变量
    </bk-button>

    <bk-table
        :data="configVars"
        style="margin-top: 15px;">
        <bk-table-column label="模块" prop="module_display.name"></bk-table-column>
        <bk-table-column label="环境" prop="environment_name">
            <template slot-scope="props">
                $[ props.row.environment_name | env2zh]
            </template>
        </bk-table-column>
        <bk-table-column label="键" prop="key"></bk-table-column>
        <bk-table-column label="值" prop="value"></bk-table-column>
        <bk-table-column label="描述" prop="description"></bk-table-column>
        <bk-table-column label="操作" width="150">
            <template slot-scope="props">
                <bk-button theme="primary" text :disabled="props.row.status === '创建中'" @click="handleEdit(props.row)">编辑</bk-button>
                <bk-button theme="primary" text @click="handleDelete(props.row)" style="color: rgb(234, 54, 54);">删除</bk-button>
            </template>
        </bk-table-column>
    </bk-table>

    <bk-dialog v-model="dialog.visible" header-position="left" width="500" :confirm-fn="submitDialog">
        <div slot="header">
            $[ dialog.type === 'create'?'添加':(dialog.type === 'edit'?'编辑':'删除') ]环境变量
        </div>
        <bk-form :label-width="120" :model="dialog.form">
            <bk-form-item label="模块" :required="true">
                <bk-select v-model="dialog.form.module" :disabled="dialog.type === 'delete'">
                    <bk-option v-for="module in moduleList"
                        :key="module.id"
                        :id="module.name"
                        :name="module.name">
                    </bk-option>
                </bk-select>
            </bk-form-item>
            <bk-form-item label="环境" :required="true">
                <bk-select v-model="dialog.form.environment_name" :disabled="dialog.type === 'delete'">
                    <bk-option v-for="env in envChoices"
                        :key="env.value"
                        :id="env.value"
                        :name="env.text">
                    </bk-option>
                </bk-select>
            </bk-form-item>
            <bk-form-item label="键" :required="true" property="key">
                <bk-input v-model="dialog.form.key" :disabled="dialog.type === 'delete'"></bk-input>
            </bk-form-item>
            <bk-form-item label="值" :required="true" property="value">
                <bk-input v-model="dialog.form.value" :disabled="dialog.type === 'delete'"></bk-input>
            </bk-form-item>
            <bk-form-item label="描述" :required="true">
                <bk-input v-model="dialog.form.description" :disabled="dialog.type === 'delete'"></bk-input>
            </bk-form-item>
        </bk-form>
    </bk-dialog>
</div>
{% endblock %}

{% block main_script %}
<script>
    const application = {{ application | to_json }}

    const configVars = {{ config_vars | to_json }}

    const moduleList = {{ module_list | to_json }}

    const envChoices = {{ env_choices | to_json }}

    const URLRouter = {
        list: decodeURI("{% url 'admin.applications.engine.config_vars.list' application.code %}"),
        create: decodeURI("{% url 'admin.applications.engine.config_vars.create' application.code '${module}' %}"),
        detail: decodeURI("{% url 'admin.applications.engine.config_vars.detail' application.code '${module}' '${id}' %}"),
    }

    document.addEventListener('DOMContentLoaded', () => {
        new Vue({
            mixins: [SubmitMixin],
            el: "#application-engine-config-vars",
            delimiters: ['$[', ']'],
            data: function () {
                return {
                    configVars,
                    application,
                    moduleList,
                    envChoices,
                    dialog: {
                        visible: false,
                        type: "create",
                        form: {
                            id: '',
                            module: '',
                            environment_name: '',
                            key: '',
                            value: '',
                            description: '',
                        }
                    }
                }
            },
            mounted: function () {
            },
            methods: {
                fetchConfigVars: async function () {
                    await this.$http.get(URLRouter.list).then(res => {
                        this.configVars = res
                    })
                },
                handleCreate: function () {
                    this.dialog.type = "create"
                    this.dialog.visible = true
                    this.dialog.form.key = ""
                    this.dialog.form.value = ""
                    this.dialog.form.description = ""

                },
                handleEdit: function (row) {
                    this.dialog.type = "edit"
                    this.dialog.visible = true
                    this.dialog.form.id = row.id
                    this.dialog.form.module = row.module_display.name
                    this.dialog.form.environment_name = row.environment_name
                    this.dialog.form.key = row.key
                    this.dialog.form.value = row.value
                    this.dialog.form.description = row.description
                },
                handleDelete: function (row) {
                    this.dialog.type = "delete"
                    this.dialog.visible = true
                    this.dialog.form.id = row.id
                    this.dialog.form.module = row.module_display.name
                    this.dialog.form.environment_name = row.environment_name
                    this.dialog.form.key = row.key
                    this.dialog.form.value = row.value
                    this.dialog.form.description = row.description
                },
                fillUrlTemplate: function (url_template, {form}) {
                  return url_template.replace("${module}", form.module).replace("${id}", form.id)
                },
                submitCallback: function () {
                    this.fetchConfigVars()
                }
            }
        })
    })
</script>
{% endblock %}
